<template>
  <!-- 弹出框演示模版 -->
  <div class="add-edit">
    <div class="add-edit-tittle">
      <p class="tittle-text">{{ pageData.AddEditText }}</p>
      <div class="tittle-button">
        <el-button size="mini" @click="_goBack">返回</el-button>
      </div>
    </div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="主题名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>

      <el-form-item label="主题描述" prop="info">
        <el-input v-model="ruleForm.info" />
      </el-form-item>

      <el-form-item label="主题logo" required>
        <!-- 图片上传 -->
        <upload-img :edit-img="pageData.AddEdit === 'edit'?editList.logo:''" :form-data="formData" @imageUrl="_getImgUrl" />
      </el-form-item>

      <el-form-item label="发布市场" prop="market">
        <el-select v-model="ruleForm.market" placeholder="请选择发布市场">
          <el-option label="唯一艺术" value="1" />
          <el-option label="未知" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadImg from '@/components/uploadImg/index.vue'
export default {
  components: {
    UploadImg
  },
  props: {
    // 数据列表 数据共 XX 条
    pageData: {
      type: Object,
      default: null
    },

    // 需要编辑的数据
    editList: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        name: '', // 主题名称
        info: '', // 主题描述
        logo: '', // 主题logo
        market: '' // 发布市场
      },
      // 表单验证
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择所在城市', trigger: 'change' }
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个兴趣爱好',
            trigger: 'change'
          }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        desc: [{ required: true, message: '请填写简介', trigger: 'blur' }]
      },

      // 页面数据预存
      formData: null
    }
  },
  mounted() {
    this.formData = this.pageData
  },
  created() {
    if (this.pageData.AddEdit === 'edit') {
      console.log('渲染列表数据', this.editList)

      this.ruleForm = {
        name: this.editList.name, // 主题名称
        info: this.editList.info, // 主题描述
        logo: this.editList.logo, // 主题logo
        market: this.editList.market // 发布市场
      }
      // this.ruleForm.name = this.editList.name
      console.log(this.ruleForm)
    }
  },
  methods: {
    // 保存 按钮事件
    submitForm(formName) {
      // 表单验证是否通过的验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log('保存成功', this.pageData.AddEdit)
          const params = {
            themeList: [this.ruleForm]
          }
          if (this.pageData.AddEdit === 'add') {
            console.log(this.ruleForm, '新增表单数据')

            this.$api.project.themeCreate(params).then(res => {
              console.log(res, '保存返回数据')
              this.$message({
                message: '新增保存成功',
                type: 'success'
              })
            }).catch(err => {
              console.log(err)
              this.$message.error('保存失败')
            })

            this.formData.popUpFlag = false // 关闭新增框
          }
          if (this.pageData.AddEdit === 'edit') {
            console.log(this.ruleForm, '编辑表单保存')

            this.$message({
              message: '此处编辑保存逻辑根据自己项目书写',
              type: 'success'
            })

            this.formData.popUpFlag = false // 关闭编辑框
          }
          // 新增/编辑 后重新渲染页面数据
          this.$emit('refreshData') // 保存时触发事件，获取最新的列表数据
        } else {
          console.log('保存失败', this.pageData.AddEdit)
          return false
        }
      })
    },

    // 重置按钮事件
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 返回按钮事件
    _goBack() {
      this.formData.popUpFlag = false
    },

    // 获取子组件 上传图片后的 地址
    _getImgUrl(imgUrl) {
      this.ruleForm.logo = imgUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.add-edit {
  height: 700px;
  width: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  background-color: #FFFFFF;
  .add-edit-tittle {
    height: 100px;
    width: 100%;
    padding: 0 10px;
    background-color: orange;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: fixed;
    top: 0;
    z-index: 5;
    .tittle-text {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .el-form {
    padding: 110px 10px 10px 10px;
  }

}
</style>
